@import (less) "~normalize.css/normalize.css";
@import '~base.less';

*, *:before, *:after{
	box-sizing: inherit;
	transition: @base-transition-timing-function @base-transition-duration;
	transition-property: 	background-color,
							background-size,
							background-position,
							border-color,
							box-shadow,
							// color,
							// fill,
							opacity,
							outline,
							transform,
							filter;
}

:active{
	transition-duration: (@base-transition-duration / 5);
}

:first-child{
    margin-top: 0;
}
:last-child{
    margin-bottom: 0;
}

[disabled],
.disabled,
.disable,
.state-disabled,
.state-disable,
[state="disabled"],
[state="disable"],
.is-disabled,
.is-disable{
    cursor:     	default;
	pointer-events: none;
    opacity:    	.5;
}

.through,
.click-through{
	pointer-events: none;
}

.no-animation{
	animation-name: none !important;
}

.hide{
	display: 	none;
}

button,
input,
optgroup,
option,
select,
textarea{
    font-family:    inherit;
}




// Default Styles -------------------------------------------------------------

html, body{
	height:     100%;
    // overflow-x: hidden;
}

html{
	font-family: 	@font-family-sans;
	background: 	@color-background;
	color: 			@color-base;
	font-size: 		@root-font-size;
	line-height: 	@base-line-height;
	box-sizing:  	border-box;
	transition: 	none;
	user-select: 	none;
	// cursor:         default;
}

body{
    position:       relative;
	font-size: 		unit(@base-font-size / @root-font-size, rem);
	line-height: 	@base-line-height;
	// margin: 		0;
	background: 	@color-background;
	transition: 	none;
}

a{
	text-decoration: none;
}

a, .link{
	color: @color-link;
	transition-property: 	background-color,
							background-size,
							background-position,
							border-color,
							box-shadow,
							color,
							// fill,
							opacity,
							outline,
							transform,
							filter;
	.hover(
		{
			color: @color-link-hover;
		}; {
			color: @color-link-active;
		}
	);

	&.color-base{
		color: 	@color-base;
		.hover(
			{
				color: @color-link-hover;
			}; {
				color: @color-link-active;
			}
		);
	}
}
.link{
	cursor: 	pointer;
}
button.link{
	appearance: none;
	display: 	inline;
	background: none transparent;
	border: 	0;
}

hr, p{
	margin: 	1.25rem 0;
}

h1, h2, h3, h4, h5, h6{
	line-height: 	1.25em;
	margin-top: 	1em;
	margin-bottom: 	(1.25 * @base-font-size);
	// color: 			@color-main;
}

    h1{
        font-size:  3rem;
		// letter-spacing: .1em;
    }

    h2{
        // font-size:  1.5rem;
        font-size:  unit(30 / @root-font-size, rem);
		// letter-spacing: .1em;
    }

    h3{
        // font-size:  1.125rem;
        font-size:  unit(20 / @root-font-size, rem);
		letter-spacing: .1em;
    }

    h4{
        // font-size:  1rem;
        font-size:  unit(18 / @root-font-size, rem);
        // color:      @theme-bluegrey-700;
    }

    h5{
        font-size:  unit(16 / @root-font-size, rem);
        // font-size:  @base-font-size;
        // color:      @theme-bluegrey-700;
    }

blockquote{
	border-left: 	4px solid @color-border;
	margin-left: 	0;
	padding: 		2px 0 2px (@base-font-size - 4px);
	font-style: 	italic;
	color: 			mix(@theme-bluegrey-200, @theme-bluegrey-300);
}

code{
	display: 		inline-block;
	font-family: 	"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
	background: 	#fff;
	border: 		1px solid mix(@theme-bluegrey-50, @theme-bluegrey-100);
	padding: 		0 .5em;
	font-size: 		smaller;
	line-height: 	1.4em;
	vertical-align: text-top;
	border-radius: 	3px;
	margin-top:		-1px;
	letter-spacing: .05em;
}

pre{
	code{
		display: 		block;
		letter-spacing: 0;
		overflow: 		auto;
		padding: 		.5em 1em;
		line-height: 	1.15em;
	}
}

#root{
	position: relative;
	z-index: @z-index-app;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
  }


// Default mixins -------------------------------------------------------------
